<template>
  <CollapseItem
    v-if="record.transactionType === TransactionType.卖卡收入">
    <template #title>
      <div class="left">
        <Image width="48" height="48" class="img"
          :src="InCome" fit="contain" />
        <div class="text">
          <div class="action">
            {{ TransactionType[record.transactionType] }}
          </div>
          <div class="time">
            {{ record.createTime }}
          </div>
        </div>
      </div>
    </template>
    <template #value>
      <div class="r">
        <div class="nPrice">
          {{
            record.amount + '￥'
          }}
        </div>
      </div>
    </template>
    <Cell title="卡券子订单号"
      v-if="record.transactionType === 1"
      @click="$router.replace({ name: 'RecordDetail', params: { id: record.customOrderNo } })"
      :value="record.cardOrderNo" />
  </CollapseItem>
  <div class="content" v-else>
    <div class="left">
      <Image width="48" height="48" class="img"
        :src="OutCome" fit="contain" />
      <div class="text">
        <div class="action">
          {{ TransactionType[record.transactionType] }}
        </div>
        <div class="time">
          {{ record.transactionTime }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="nPrice">
        {{
          '-' + record.amount + '￥'
        }}
      </div>
      <div class="tag">
        <Tag :type="transStatusTypeColor">
          {{ transStatusType }}
        </Tag>
      </div>
    </div>
  </div>
  <div class="line" v-if="index + 1 !== length" />
</template>
<script setup lang="ts">
import {
  Cell, CollapseItem, Image, Tag,
} from 'vant';
import { computed, type PropType } from 'vue';

import InCome from '@/assets/images/income.png';
import OutCome from '@/assets/images/outcome.png';

import { TransactionType } from '../const';
import TransactionItem from '../models/TransactionItem';

const props = defineProps({
  record: {
    type: Object as PropType<TransactionItem>,
    default: () => ({}),
  },
  index: {
    type: Number,
    default: 0,
  },
  length: {
    type: Number,
    default: 0,
  },
});

const transStatusType = computed(() => {
  const TransStatusType: Record<any, any> = {
    1: '成功',
    2: '处理中',
  };

  return props.record.status === null ? '成功' : (TransStatusType[props.record.status] || '处理中');
});

const transStatusTypeColor = computed(() => {
  const TransStatusType: Record<any, any> = {
    1: 'success',
    2: 'primary',
  };

  return props.record.status === null ? 'success' : (TransStatusType[props.record.status] || 'primary');
});

</script>
<style scoped lang="less">
.content {
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  display: flex;
}

.left {
  display: flex;
  align-items: center;
  gap: 5px;

  .text {
    flex-grow: 1;

    .action {
      color: #565454;
      font-size: 15px;

    }

    .time {
      color: #706e6e;
      font-size: 12px;
      text-wrap: nowrap;
    }
  }
}

.right {
  flex-grow: 1;

  .nPrice {
    text-align: right;
    color: #969799;
    font-size: 14px;
  }

  .tag{
    text-align: right;
  }
}

.line {
  height: 5px;
  background: #f5f5f5;
}
</style>
